<template>
  <div class="player-lyric" v-if="lrc.length > 0">
    <scroll
      class="scroll"
      :data="lyricArray"
      :pulldown="true"
      :pullUpload="true"
      :probeType="3"
      ref="Scroll"
    >
      <ul class="lyric-line">
        <li v-for="(line, index) in lrc" :key="index" 
        :class="[index === lyricIndex ? `${'player-action-' + theme}` : '']">
          {{ line[1] }}
        </li>
      </ul>
    </scroll>
  </div>
</template>
<script>
import { theme } from 'mixin/global/theme'
import { parseLyric } from "utils/parse-lyric";
import Scroll from "components/common/scroll/Scroll";
export default {
  name: "playerLyric",
  mixins: [theme],
  props: {
    lyric: {
      type: String,
      default: "",
    },
    currentTime: {
      type: Number,
      default: 0,
    },
  },
  components: {
    Scroll,
  },
  data() {
    return {
      lyricArray: [], // 转化后的歌词数组
      lyricIndex: 0, // 歌词活跃行
    };
  },
  computed: {
    lrc() {
      return parseLyric(this.lyric);
    },
  },
  watch: {
    lyric() {
      /* 格式化歌词 */
      this.$nextTick(() => {
          this.$refs.Scroll.scrollTo(0,0)
          this.$refs.Scroll.refresh()
      })
      this.lyricArray = parseLyric(this.lyric);
      console.log(this.lyricArray);
    },
    currentTime(currentTime) {
      for (let i = 0; i < this.lyricArray.length; i++) {
        const line = this.lyricArray[i];
        const nextLine = this.lyricArray[i + 1];
        if (currentTime >= line[0] && currentTime < nextLine[0]) {
          if (this.lyricIndex != i) {
            this.lyricIndex = i
            this.$refs.Scroll.scrollTo(0,-50 * this.lyricIndex,300)
          }
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.player-lyric {
  padding: 0 2rem;
  height: 30rem;
  position: relative;
  overflow: hidden;
}
.lyric-line {
  list-style: none;
  text-align: center;
}
.lyric-line li {
  margin: 2rem 1rem;
}
.scroll {
  height: 100%;
  // overflow: hidden;
  // position: absolute;
  // left: 0;
  // top: 0;
  // right: -17px;
  // bottom: 0;
  // overflow-y: scroll;
  // overflow-x: hidden;
}
.scroll:hover {
  left: 17px;
  right: 0;
  // overflow: auto;
  // transform: translateX(8px);
}
.player-action-light {
  color: red;
}
.player-action-green {
  color: red;
}
</style>